<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <swiper
    class="swipe"
    :auto="true"
    :loop="true"
    height="200px">
    <swiper-item
      class="w-image-fit image"
      v-for="(item, index) in dataArr"
      v-lazy:background-image="item.mHomeBannerUrl"
      :key="index">
      <p class="title">{{ item.title }}</p>
      <p class="detail">{{ item.detail }}</p>
    </swiper-item>
  </swiper>
</template>

<script>
  import BannerModel from '@/models/web/BannerModel'
  import { Swiper, SwiperItem } from 'vux'
  export default {
    name: 'HomeRootBanner',
    components: {
      Swiper,
      SwiperItem
    },
    data() {
      return {
        /**
         * Banner模型数组
         */
        dataArr: []
      }
    },
    methods: {
      /**
       * 获取所有数据
       */
      getAllBanners: function () {
        BannerModel.loadAllModels (null, true).w_then((dataArr) => {
          this.dataArr = dataArr
        })
      }
    },
    mounted: function () {
      this.getAllBanners ()
    }
  }
</script>

<style lang="scss" scoped>
  .swipe {
    padding: 0;
    margin: 0;

    .image {
      width: 100%;

      .title {
        color: #fff;
        font-size: 20px;
        margin: 0;
        padding: 15px;
      }

      .detail {
        color: #ccc;
        font-size: 16px;
        margin: 0;
        padding: 0 15px;
        line-height: 24px;
        word-wrap: break-word;
      }
    }
  }
</style>
